<template>
	<view class="section">
	  <text class="section-title">姓名</text>
	  <view class="remark-input">
	    <textarea placeholder="请输入姓名" v-model="name" auto-height/>
	  </view>
	</view>
	
	<view class="section">
	  <text class="section-title">联系电话</text>
	  <view class="remark-input">
	    <textarea placeholder="请输入联系电话" v-model="phone" auto-height/>
	  </view>
	</view>
	
	 <!-- 抢单范围部分 -->
	  <view class="section">
	    <text class="section-title">抢单范围(最多可选择六个城市)</text>
	    
	    <picker mode="selector" :range="region" @change="handleRegionChange">
	      <view class="province-selector">
	        <view class="province-item">
	          <text class="placeholder">点击选择省份</text>
	        </view>
	      </view>
	    </picker>
	    
	    <!-- 已选城市展示 -->
	    <view class="selected-cities" v-if="selectedCities.length > 0">
	      <text class="selected-title">已选城市：</text>
	      <view v-for="(city, index) in selectedCities" :key="index" class="city-tag">
	        {{city}}
	        <text @click="removeCity(index)" class="remove-btn">×</text>
	      </view>
	    </view>
	  </view>
	  
	  
	
	<!-- 服务技能部分 -->
	<view class="section">
	  <text class="section-title">服务技能(可多选)</text>
	  <view class="skill-tags">
	    <view 
	      class="skill-tag" 
	      v-for="(skill, index) in skills" 
	      :key="index"
	      :class="{active: selectedSkills.includes(skill)}"
	      @click="toggleSkill(skill)"
	    >
	      {{skill}}
	    </view>
	  </view>
	</view>
	
	<!-- 提示信息部分 -->
	<view class="prompt-section">
	  <text class="prompt-text">欢迎各位师傅入驻！</text>
	</view>
	
	<!-- 提交按钮 -->
	<view class="submit-btn" @click="handleSubmit">提交申请</view>
</template>

<script >
	import { ref } from 'vue';
	
	export default {
	  data() {
	    return {
	      name: '',
	      phone: '',
	      selectedSkills: [],
		  selectedCities: [], 
		  region:['重庆','成都','达州','北京','天津','上海','广州'],
		  showCityPicker: false, // 控制城市选择器显示
		  availableCities: ['重庆','成都','达州','北京','天津','上海','广州'],
	    
		 skills: [
		   '更换台尼',
		   '拆装球桌',
		   '更换配件',
		   '球杆维修',
		   '搬修服务',    
		 ],
		 isSubmitting: false
		}
	      
	    
	  },
	  methods: {
		     // 处理地区选择
		      handleRegionChange(e) {
		        if (this.selectedCities.length >= 6) {
		          uni.showToast({
		            title: '最多选择6个城市',
		            icon: 'none'
		          });
		          return;
		        }
		        
		        const selectedCity = this.region[e.detail.value];
		        if (!this.selectedCities.includes(selectedCity)) {
		          this.selectedCities.push(selectedCity);
		        } else {
		          uni.showToast({
		            title: '该城市已选择',
		            icon: 'none'
		          });
		        }
		      },
		      
		      // 移除城市
		      removeCity(index) {
		        this.selectedCities.splice(index, 1);
		      },
		  
		  
		  
	    toggleSkill(skill) {
	      const index = this.selectedSkills.indexOf(skill);
	      if (index > -1) {
	        this.selectedSkills.splice(index, 1);
	      } else {
	        this.selectedSkills.push(skill);
	      }
	    },
	    handleSubmit() {
	      console.log('提交申请', {
	        name: this.name,
	        phone: this.phone,
	        skills: this.selectedSkills
	      });
	      uni.showToast({
	        title: '提交成功',
	        icon: 'success'
	      });
		  
		  this.token = uni.getStorageSync('token');
		   this.$http.post("/workers",{
		  	   name: this.name,
			   phone: this.phone,
			   work_city: this.selectedCities,
			   skills: this.selectedSkills
		   })
		  .then((res)=>{
		  	console.log(res);
		  	const {code,msg,data} = res;
		  	uni.showToast({
		  		title:msg,
		  		icon:'none'
		  	});
		  	if(code === 1|| code === 200) {
		  		if(data&&data.length>0){
		  			// this.formData = data;
		  			console.log(data); 
		  		
		  		}
		  		return Promise.resolve(true);
		  	}
		  	return Promise.reject(false);
		  })
		  .catch((res)=>{
		  	console.log(res);
		  	return Promise.reject(false);
		  });
	    }
	  }
	}
</script>

<style lang="scss" scoped>
	.section {
	  padding: 20rpx 20rpx;
	  border-bottom: 1rpx solid #f0f0f0;
	}
	
	.section:last-child {
	  border-bottom: none;
	}
	
	.section-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-bottom: 20rpx;
	  color: #333;
	  display: block;
	  padding-left: 10rpx;
	  border-left: 6rpx solid #fdad18;
	}
	
	.remark-input {
	  background-color: #f8f8f8;
	  border-radius: 10rpx;
	  padding: 15rpx 20rpx;
	}
	
	.remark-input textarea {
	  width: 80%;
	  min-height: 20rpx;
	  font-size: 28rpx;
	}
	
	
	.province-selector {
	  display: flex;
	  flex-direction: column;
	  gap: 20rpx;
	  
	  .province-item {
	    padding: 20rpx;
	    background-color: #f8f8f8;
	    border-radius: 10rpx;
	    
	    .placeholder {
	      color: #999;
	      font-size: 28rpx;
	    }
	  }
	}
	
	.selected-cities {
	  margin-top: 20rpx;
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  gap: 15rpx;
	  
	  .selected-title {
	    font-size: 28rpx;
	    color: #666;
	  }
	  
	  .city-tag {
	    padding: 8rpx 20rpx;
	    background-color: #f0f0f0;
	    border-radius: 30rpx;
	    font-size: 26rpx;
	    position: relative;
	    
	    .remove-btn {
	      position: absolute;
	      right: 5rpx;
	      top: -8rpx;
	      color: red;
	      font-size: 30rpx;
	      line-height: 1;
	    }
	  }
	}
	
	
	.skill-tags {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 20rpx;
	  
	  .skill-tag {
	    padding: 15rpx 30rpx;
	    border: 1rpx solid #fdad18;
	    border-radius: 50rpx;
	    font-size: 26rpx;
	    color: #fdad18;
	    
	    &.active {
	      background-color: #fdad18;
	      color: #fff;
	    }
	  }
	}
	
	.prompt-section {
	  padding: 30rpx 20rpx;
	  text-align: center;
	  
	  .prompt-text {
	    color: #fdad18;
	    font-size: 26rpx;
	  }
	}
	
	.submit-btn {
	  margin: 40rpx 20rpx;
	  padding: 25rpx;
	  background-color: #fdad18;
	  color: #fff;
	  text-align: center;
	  border-radius: 50rpx;
	  font-size: 32rpx;
	  font-weight: bold;
	}
</style>